<template>
  <div>
    <main-nav-bar />
    <div
      class="user my-scroll"
      :style="{
        background:
          'url(' + bgList[currentIndex] + ') center center no-repeat ',
      }"
    >
      <!-- 头部 -->
      <div class=" myhead">
        <h1 class="display-3 header-title ">
          {{ $store.state.users.username }}的个人空间
        </h1>
        <i class="bi bi-chevron-double-down"></i>
      </div>

      <div class=" mybody" ref="mybody">
        <div class="row  d-flex   justify-content-center aligin-item-center">
          <!-- 左侧用户信息展示 -->
          <div class="col-12   col-md-5 col-lg-3  d-flex flex-column">
            <!-- 头像 -->
            <div
              class="col-12 d-flex   justify-content-center aligin-item-center"
            >
              <div class="card card-left  text-center mt-4">
                <div class="card-img-top">
                  <el-avatar :size="110" class="hvr-bounce-in">
                    <img class="" :src="$store.state.users.avatar" alt="" />
                  </el-avatar>

                  <h3>
                    {{ $store.state.users.username }}
                  </h3>
                  <span v-if="$store.getters.getUserInfo.gender == '男'">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-gender-male"
                      viewBox="0 0 16 16"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M9.5 2a.5.5 0 0 1 0-1h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.707L9.871 6.836a5 5 0 1 1-.707-.707L13.293 2H9.5zM6 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"
                      /></svg
                    >男
                  </span>
                  <span v-else
                    ><svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-gender-female"
                      viewBox="0 0 16 16"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M8 1a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM3 5a5 5 0 1 1 5.5 4.975V12h2a.5.5 0 0 1 0 1h-2v2.5a.5.5 0 0 1-1 0V13h-2a.5.5 0 0 1 0-1h2V9.975A5 5 0 0 1 3 5z"
                      />
                    </svg>
                    女</span
                  >
                </div>
                <div class="card-body">
                  <p class="card-title">
                    Email：{{ $store.state.users.email }}
                  </p>
                  <p>
                    <location-postion />
                  </p>

                  <router-link
                    to="/modification"
                    class="hvr-bounce-to-left gohome"
                  >
                    修改信息</router-link
                  >
                  <router-link
                    to="/modificatonPassword"
                    class="hvr-bounce-to-left gohome"
                  >
                    修改密码</router-link
                  >
                </div>
              </div>
            </div>
            <!-- 天气 -->
            <div
              class="col-12 d-flex   justify-content-center aligin-item-center"
            >
              <div class="card card-left mt-4  text-center ">
                <div class="card-body position-relative">
                  <h4 class="card-title">出行指向</h4>
                  <div class="row">
                    <div v-if="!showImg">
                      <div
                        class="card-text"
                        v-for="(item, index) in weatherList"
                        :key="index"
                      >
                        <div class="col-12  pt-4 pb-2 ">
                          天气：{{ item.now.cond_txt }}
                        </div>
                        <div class="col-12 py-2">
                          当前温度：{{ item.now.tmp }}℃
                        </div>
                        <div class="col-12 py-2">
                          更新时间：{{ item.update.loc }}
                        </div>
                        <div class="col-12 py-2">
                          当前风速:{{ item.now.wind_spd }}km/h
                        </div>
                        <div class="col-12 py-2">
                          风向:{{ item.now.wind_dir }}
                        </div>
                        <div class="col-12 py-2">
                          风力:{{ item.now.wind_sc }}级
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <img
                        src="@/assets/imags/UserInfo/err.png"
                        alt=""
                        style="width:100%; height:100%;"
                      />
                    </div>
                    <div class="col-12 my-search">
                      <el-input placeholder="请输入内容" v-model="cityName">
                        <template #prefix>
                          <i
                            class="el-input__icon el-icon-search"
                            @click="getOtherWeather"
                          ></i>
                        </template>
                      </el-input>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 日期 -->
            <div
              class="col-12 d-flex   justify-content-center aligin-item-center"
            >
              <div class="card card-left mt-4 mb-4  text-center ">
                <div class="card-body">
                  <h4 class="card-title">人生倒计时</h4>
                  <div class="card-text">
                    <div
                      class="content"
                      style="padding-top:14px"
                      v-for="(item, index) in timeLisst"
                      :key="index"
                    >
                      <div class="item my-2">
                        <div class="title">
                          今 日 已 经 过 去&nbsp;<span>{{ item.h }}</span
                          >&nbsp;小时
                        </div>
                        <el-progress
                          :percentage="parseFloat(item.hp.toFixed(2))"
                        ></el-progress>
                      </div>

                      <div class="item my-2">
                        <div class="title">
                          这 周 已 经 过 去&nbsp;<span>{{ item.w }}</span
                          >&nbsp;天
                        </div>
                        <el-progress
                          :percentage="parseFloat(item.wp.toFixed(2))"
                        ></el-progress>
                      </div>
                      <div class="item my-2">
                        <div class="title">
                          本 月 已 经 过 去&nbsp;<span>{{ item.d }}</span
                          >&nbsp;天
                        </div>
                        <el-progress
                          :percentage="parseFloat(item.dp.toFixed(2))"
                        ></el-progress>
                      </div>
                      <div class="item my-2">
                        <div class="title">
                          今 年 已 经 过 去&nbsp;<span>{{ item.month }}</span
                          >&nbsp;个月
                        </div>
                        <el-progress
                          :percentage="parseFloat(item.monthp.toFixed(2))"
                        ></el-progress>
                      </div>
                      <!-- <div class="item my-3">
                        <div class="title">
                          <span>{{ date }}</span
                          >&nbsp;
                        </div>
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--右侧信息-->
          <div
            class="col-12 col-md-7  col-lg-9 d-flex flex-column justify-content-center aligin-item-center"
          >
            <!-- echars 数据分析 -->

            <div
              class="card mb-4 "
              style="height:50vh; margin: 0 30px;padding:30px 50px ;"
            >
              <h4>数据展示</h4>
              <echarts
                v-if="showEcharts && dataY.length > 0"
                :title="title"
                :dataX="dataX"
                :dataY="dataY"
              />
              <h1 v-if="dataY.length == 0">
                暂无数据
              </h1>
            </div>

            <!-- 个人留言展示 -->
            <div
              class="card mb-4  "
              style="min-height:50vh; margin:0 30px; position: relative;padding:30px 50px ;"
            >
              <h4>我的足迹</h4>
              <!-- 留言 -->
              <div style="width:100%;">
                <div
                  class="card messageListCard mb-3 mx-3 my-3"
                  v-for="item in messageList"
                  :key="item.id"
                >
                  <div class="row">
                    <div
                      class="col-md-4 d-flex flex-column justify-content-center align-items-center"
                      style="border-right: 1px dotted #ccc;"
                    >
                      <div v-if="item.name == 'admin'" class="log1">
                        <img
                          :src="item.headPortrait"
                          alt="头像"
                          style=" border-radius:50%;"
                        />
                      </div>

                      <div v-else class="log3">
                        <img
                          :src="item.headPortrait"
                          alt="头像"
                          style=" border-radius:50%;"
                        />
                      </div>
                      <h4 class="mt-3">{{ item.name }}</h4>
                    </div>
                    <div class="col-md-8">
                      <div class="card-body " style=" margin-top: 20px;">
                        <p class="card-title">
                          {{ item.message }}
                        </p>
                        <p class="card-text">
                          <small class="text-muted">
                            发表日期： {{ item.time | formatDate }}
                          </small>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 留言分页pc -->
              <div class="row    d-none d-lg-block">
                <div class="block">
                  <el-pagination
                    v-if="messageList.length > 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    background
                    :page-sizes="[2, 3, 4]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </div>
              <!-- 移动端 -->
              <div class="row d-block d-lg-none">
                <div class="block">
                  <el-pagination
                    v-if="messageList.length > 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    background
                    :page-sizes="[4, 6, 8, 10]"
                    :page-size="pageSize"
                    layout="total,prev, pager, next"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </div>
              <h1 v-if="messageList.length == 0">
                暂无数据
              </h1>
            </div>
            <!-- 每一读 / 发布公告-->
            <div
              v-if="$store.getters.getUserInfo.roles[0] === '普通用户'"
              class="card mb-4  "
              style="  max-height:70vh; margin:0 30px; padding:30px 50px ; "
            >
              <h4 class="text-start">
                每日一读
              </h4>
              <div class="my-scroll" style="overflow-y: scroll; ">
                <h3>{{ article.title }}</h3>
                <span>{{ article.author }}</span>
                <p class="text-start" v-html="article.content"></p>
              </div>
            </div>
            <!-- 发布公告 -->
            <div
              v-if="
                $store.getters.getUserInfo.roles[0] === '超级管理员' ||
                  $store.getters.getUserInfo.roles[0] === '管理员'
              "
              class="card mb-4  "
              style="  max-height:70vh; margin:0 30px; padding:30px 50px ; "
            >
              <h4 class="text-start">
                发布公告
              </h4>
              <div class="row myrow">
                <el-form
                  :model="ruleForm"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item class="mt-3 mb-3">
                    <el-input
                      type="input"
                      rows="5"
                      cols="20"
                      placeholder="标题"
                      v-model="ruleForm.title"
                    ></el-input>
                  </el-form-item>

                  <el-form-item class="mb-5">
                    <el-input
                      type="textarea"
                      rows="5"
                      cols="20"
                      placeholder="发布公告"
                      v-model="ruleForm.bulletinBoard"
                    ></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')"
                      >发布
                    </el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer style="height:10vh;"></footer>
    </div>
    <!-- 换肤 -->
    <el-tooltip
      class="item"
      effect="dark"
      content="点击可更换背景"
      placement="top-start"
    >
      <el-button class="changeBg hvr-wobble-horizontal" @click="changeBg"
        >背景</el-button
      >
    </el-tooltip>
  </div>
</template>

<script>
import MainNavBar from "@/common/NavBar/MainNavBar.vue";
import GoTop from "@/components/GoTop.vue";
import LocationPostion from "@/common/LocationPostion.vue";
import { formatDateTime } from "@/assets/Tools/date.js";
import Echarts from "@/common/Echarts.vue";
import formatDateTimes from "@/assets/Tools/date2.js";
import qs from "qs";
export default {
  data() {
    return {
      currentIndex: 2,
      address: "",
      cityName: "",
      showImg: false,
      weatherList: [],
      timeLisst: [],
      date: "",
      showEcharts: false,
      title: "数据分析图",
      // dataX: ["被点赞数", "发表留言数", "收藏数","被收藏数"],
      dataX: ["发表留言数"],
      dataY: [],
      bgList: [
        "https://images.unsplash.com/photo-1567225591450-06036b3392a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
        "https://images.unsplash.com/photo-1586807480822-0e95ba6666ad?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
        "https://images.unsplash.com/photo-1612490566683-0b3ceabea435?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80",
        "https://images.unsplash.com/photo-1421986527537-888d998adb74?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
      ],
      messageList: [],
      // 分页
      total: 0,
      pageSize: 2,
      currentPage: 1,
      article: [],
      ruleForm: {
        title: "",
        bulletinBoard: "",
      },

      // 公告栏内容
    };
  },
  components: {
    MainNavBar,
    LocationPostion,
    Echarts,
    GoTop,
  },
  filters: {
    // 发表时间格式化
    formatDate(val) {
      return formatDateTimes.formatDateTime(val);
    },
  },
  created() {
    if (window.sessionStorage.getItem("cityName")) {
      this.cityName = window.sessionStorage.getItem("cityName");
    } else {
      this.cityName = "福州市";
    }

    this.getWeather();
    this.getTime();
    this.getMessages();
    this.getArticle();
  },

  methods: {
    //改变背景
    changeBg() {
      this.currentIndex > this.bgList.length - 2
        ? (this.currentIndex = 0)
        : this.currentIndex++;
    },
    //获取所在地的天气
    async getWeather() {
      const data = await this.$http.get("https://v2.alapi.cn/api/weather", {
        params: {
          location: this.cityName,
          token: "RbNodDkj5sXHjenGxjqh",
        },
      });
      if (data.code == 200) {
        this.weatherList.push(data.data);
        this.showImg = false;
      } else {
        this.showImg = true;
      }
    },
    // 获取其他地方天气
    getOtherWeather() {
      this.weatherList = [];
      this.getWeather();
    },
    // 时间
    getTime() {
      var myDate = new Date();
      // 时
      var h = myDate.getHours();
      var hp = (h / 24) * 100;

      // 周
      var w;
      if (myDate.getDay() == 0) {
        w = 7;
      } else w = myDate.getDay();
      var wp = (w / 7) * 100;
      //月
      var month = myDate.getMonth() + 1;
      var monthp = (month / 12) * 100;

      // 天
      var d = myDate.getDate();

      myDate = new Date(myDate.getFullYear(), myDate.getMonth() + 1, 0); // 得到本月最后一天

      var dp = (d / myDate.getDate()) * 100;

      this.timeLisst.push({
        h: h,
        hp: hp,
        w: w,
        wp: wp,
        d: d,
        dp: dp,
        month: month,
        monthp: monthp,
      });
    },
    //获取我的所有留言
    async getMessages() {
      const data = await this.$http.post(
        "/leavingMessage/getMessageById?" +
          qs.stringify({
            postId: this.$store.getters.getUserInfo.id,
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          })
      );

      if (data.code == 200) {
        this.messageList = data.data.records;
        this.total = data.data.records.length;
        if (this.total != 0) {
          this.$set(this.dataY, 0, this.total);
          this.showEcharts = true;
        }
      }
    },
    //留言分页
    // 当前页数
    handleSizeChange(pageSize) {
      this.currentPage = 1;
      this.pageSize = pageSize;
      this.getMessages();
    },
    // 跳转页数
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getMessages();
    },

    // 获取每日一文
    async getArticle() {
      const data = await this.$http.get("https://v2.alapi.cn/api/mryw", {
        params: {
          token: "RbNodDkj5sXHjenGxjqh",
        },
      });
      if (data.code == 200) {
        this.article = data.data;
      }
      console.log(data.data);
    },

    //提交公告
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const data = await this.$http.post("/home/submitNotice", {
            userId: this.$store.getters.getUserInfo.id,
            title: this.ruleForm.title,
            content: this.ruleForm.bulletinBoard,
          });

          if (data.code == 200) {
            this.ruleForm.bulletinBoard = "";
            this.ruleForm.title = "";
            this.$message.success("发布成功！");
          } else {
            this.$message.error("发布失败！");
          }
        }
      });
    },
    // 清空表单
    resetForm(formName) {
      this.ruleForm.bulletinBoard = "";
      this.ruleForm.title = "";
    },
  },
};
</script>

<style lang="less" scoped>
.user {
  position: relative;
  height: 100vh;
  transition: 0.5s;
  background-attachment: fixed;
  overflow: scroll;
  overflow-x: hidden;
}
h1 {
  margin-top: 15%;
}
.myhead {
  width: 100%;

  background: transparent;
}
.header-title {
  margin-top: 50%;
  text-align: center;
  color: rgb(250, 240, 240);

  text-align: center;
  font-weight: 700;

  text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.15);
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Lato, Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;

  animation: scaleUp 3s 1s infinite;
}

.bi-chevron-double-down {
  position: absolute;
  font-size: 2em;
  color: #fff;
  font-weight: 600;
  margin-top: 10%;
  animation: movedown 2s infinite;
}
@keyframes movedown {
  40% {
    margin-top: 12%;
    opacity: 0.5;
  }
}
@keyframes scaleUp {
  40% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1.2);
  }
}

.mybody {
  transition: 0.5s;
  margin-top: 30%;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
}
.card {
  transition: all 0.3s;
  border-radius: 12px 8px 8px 12px;
}
.card:hover {
  box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15);
}
.card-left {
  width: 20rem;
  height: 25rem;
  padding-top: 1.25rem;
  h3 {
    margin-top: 0.9375rem;
  }
}
//右边一
.gohome {
  display: inline-block;
  width: 40%;
  line-height: 2.5rem;
  margin: 10px 6px;
  text-decoration: none;
  color: #fff;
  background: rgb(73, 177, 245);
}
// 右侧 二
.my-search {
  position: absolute;
  bottom: 10px;
}

.changeBg {
  position: fixed;
  right: 1.875rem;
  bottom: 2.5rem;
}
p {
  text-indent: 0 !important;
}

.log1 {
  background: url("~@/assets/headPortrait1.png") no-repeat;
  background-size: cover;
}
.log3 {
  background: url("~@/assets/headPortrait3.png") no-repeat;
  background-size: cover;
  img {
    margin-top: 0 !important;
    height: 63px !important;
  }
}
.log1,
.log3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;

  img {
    width: 60px;
    height: 60px;
    margin-top: 6px;
  }
}
</style>
